// Vuex的子模块
// 静态路由,可以一直被访问
// 动态路由,得根据当前登陆者的身份进行筛选
// vuex中的permission模块用来存放当前的 静态路由 + 当前用户的 权限路由
import { constantRoutes, asyncRoutes } from '@/router'

const state = {
  routes: constantRoutes
}
const mutations = {
  setRoutes(state, newRoutes) { // newRoutes可以认为是 用户登录 通过权限所得到的动态路由的部分
    state.routes = [...constantRoutes, ...newRoutes] // 静态路由和动态路由合并
  }
}
const actions = { // menus为当前用户的所拥有的菜单权限,数组结构
  filterRoutes({ commit }, menus) { // 筛选路由 筛选出 动态路由中和menus中能够对上的路由 进行返回和提交mutations
    const routes = []
    menus.forEach(key => { // menus要和动态路由表匹配 elements => key
      routes.push(...asyncRoutes.filter(item => item.name === key)) // asyncRoutes为对象型数组结构 返回一个数组
    }) // 得到的routes就是筛选之后的路由
    // 通过 addRoutes 添加到当前的路由表
    commit('setRoutes', routes)
    return routes
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
